<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/aui.css" />
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/Login.css" />
	<style media="screen">
		.loginBtn{
			width: 80%;
			font-size: .5rem;
		}
	</style>
</head>

<body>
	<header class="logo">
		<img src="../image/icon/logo.png" />
	</header>

	<div class="mui-content login">
		<div class="login-info">
			<div class="mui-input-row">
				<span><img src="../image/icon/icon-01@2x.png"/></span>
				<input id="username" class="mui-input-clear" placeholder="请输入手机号码" value="" oninput="if(value.length>11)value=value.slice(0,11)" type="number" />
			</div>
			<div class="mui-input-row">
				<span><img src="../image/icon/icon-02@2x.png"/></span>
				<input class="mui-input-password" style="margin-left: 20px;" name="code" id="code" type="number" placeholder="请输入验证码" />
				<button class="aui-btn aui-btn-block" id="btnSendCode" type="button" tapmode onclick="sendCode()">获取验证码</button>
			</div>
		</div>

		<div class="login-btn">
			<div tapmode  onclick="login()"  id="dl" class="mui-btn mui-btn-primary isOk"  >登&nbsp;&nbsp;&nbsp;录</div>
			    <!-- <button type="button" data-loading-icon="mui-spinner mui-spinner-custom"  onclick="login()" class="mui-btn mui-btn-primary isOk loginBtn" id="dl">登&nbsp;&nbsp;&nbsp;录</button> -->
		</div>
		<div class="foote">
			<!-- <div class="thread">
				<div class="thread1"></div>
				<div class="thread2">其它登录方式</div>
				<div class="thread3"></div>
			</div>
			<div class="login-share">
				<div>
					<div class="qita"><img src="../image/icon/weix@2x.png" /></div>
					<div class="login-size">微信登录</div>
				</div>
				<div>
					<div class="qita"><img src="../image/icon/QQ@2x.png" /></div>
					<div class="login-size">QQ登录</div>
				</div>
			</div> -->
			<div class="bottom"><span>登录成功即代表您已经同意</span>&nbsp;
				<a>
					<<车车侠服务协议>></a>
			</div>
		</div>
	</div>
	<ul id="twb">
	</ul>
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript " src="../script/api.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript ">
	apiready = function() {
		mui(document.body).on('tap', '.isOk', function(e) {
        mui(this).button('loading');
        setTimeout(function() {
            mui(this).button('reset');
        }.bind(this), 1000);
    });
	};
	//判断是否安装了qq
	function qqlogin() {
		var qq = api.require('qq');
		//登陆qq
		qq.login(function(ret, err) {
			alert(ret);
			api.alert({
				title: 'id和token',
				msg: ret.openId + ret.accessToken
			});
		});
		//是否有qq
		qq.installed(function(ret, err) {
			if (ret.status) {
				api.alert({
					msg: "安装"
				});
			} else {
				api.alert({
					msg: "没有安装"
				});
			}
		});
	}
	//验证码发送
	/*------------------短信验证-------------------------*/
	var after = '';
	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount = 60; //当前剩余秒数
	var exp = new Date();
	var time;
	time = exp.getTime();
	//获取cookie值
	function getCookie(name) {
		var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
		if (arr = document.cookie.match(reg))
			return unescape(arr[2]);
		else
			return null;
	}
	//这是有设定过期时间的使用示例：
	//s20是代表20秒
	//h是指小时，如12小时则是：h12
	//d是天数，30天则：d30
	//设置cookie
	function setCookie(name, value, time) {
		var strsec = getsec(time);
		var exp = new Date();
		exp.setTime(exp.getTime() + strsec * 1);
		document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
	}

	function getsec(str) {
		// alert(str);
		var str1 = str.substring(1, str.length) * 1;
		var str2 = str.substring(0, 1);
		if (str2 == "s") {
			return str1 * 1000;
		} else if (str2 == "h") {
			return str1 * 60 * 60 * 1000;
		} else if (str2 == "d") {
			return str1 * 24 * 60 * 60 * 1000;
		}
	}

	function sendCode() {
		if (getCookie('after') > time && document.cookie.indexOf('after=') != -1) {
			// api.toast({ //提示框1秒
			// 	msg: ' 请不要在60秒内重复获取验证码! ',
			// 	duration: 1100,
			// 	location: 'bottom'
			// })
			$api.byId('btnSendCode').setAttribute(disabled,"disabled");
		} else {
			trySend(); //调用一次
		}

	}

	function trySend() {
		if (getCookie('after') < time || document.cookie.indexOf('after=') == -1 || getCookie('after') == null) {
			var cellPhoneNumber = $api.byId('username').value;
			// console.log(cellPhoneNumber);
			BASE.MYajax({
				'pathName': 'auth/sendCodeSMS', //请求路径
				'methods': 'post',
				'ajaxData': {
					values: {
						mobile: cellPhoneNumber
					}
				},
				'method': backData //调用函数
			});

			function backData(ret, err) {
				if (ret.code == 200) {
					api.toast({
						msg: "车车侠：" + ret.message,
						duration: 2000,
						location: 'bottom',
						global: true,
					});
					setCookie("after", time + 60 * 1000, "s60");
					// setCookie("phone", $('#phone').val(), "s60");
					setCookie("phone", $api.byId('username').value, "s60");
					curCount = count;
					//设置button效果，开始计时
					// $("#btnSendCode").attr("disabled", "true");
					$api.byId('btnSendCode').setAttribute("disabled", "true");
					// $("#btnSendCode").val(curCount + "秒后重新获取");
					$api.byId('btnSendCode').value = (curCount + "秒后重新获取");
					InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
				} else {
					reToast(ret, err);
				}
			}
		}
	}
	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj); //停止计时器
			// $("#btnSendCode").removeAttr("disabled"); //启用按钮
			$api.byId('btnSendCode').removeAttribute("disabled");
			$api.byId('btnSendCode').innerHTML = ("重新发送验证码");
			// $("#btnSendCode").val("重新发送验证码");
			// code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
		} else {
			curCount--;
			// $("#btnSendCode").val(curCount + "秒后重新获取");
			$api.byId('btnSendCode').innerHTML = (curCount + "秒后重新获取");
		}
	}
	/*------------------短信验证结束-------------------------*/
	//账号登录
	function login() {
		var username = $api.byId('username').value; //获取手机号
		var cerificationCode = $api.byId('code').value; //手机验证码
		//var cellPhoneNumber_reg = /^1[34578]\d{9}$/; //手机号码正则表达式验证。
		var cerificationCode_reg = /^[0-9]{5}$/; //验证码只能是5位数
		if (username == '') {
			alert('您的账号为空！')
		} else if (cerificationCode_reg.test(cerificationCode) != true) {
			alert('请输入5位数的验证码!')
		} else {
			api.showProgress({
				title: '努力加载中...',
				text: '先喝杯茶...',
				// modal: false
			});
			//console.log(username)
			//console.log(cerificationCode);

			BASE.MYajax({
				'pathName': 'auth/login', //请求路径
				'methods': 'post',
				'ajaxData': {
					values: {
						mobile: username,
						code: cerificationCode
					}
				},
				// 回调函数
				'method': backData //调用函数
			});

			function backData(ret, err) {
				api.hideProgress();
				// console.log(JSON.stringify(ret));
				if (ret.code == 200) {
					fnGoHome(ret)
				} else {
					reToast(ret, err);
				}
			}
		}
	}

	function fnGoHome(ret) {
		api.toast({
			msg: '登陆成功',
			duration: 2000,
			location: 'bottom',
			global: true,
		});
		var token = ret.data.token;
		console.log('登陆成功！ '+JSON.stringify(ret));
		var userInfo = ret.data.userInfo;

		// 登录个人信息
		$api.setStorage('userInfo', userInfo);
		// 存全局token
		$api.setStorage('token', token);

		// api.execScript({
		// 	// window名字
		// 	name: 'Main_Frame',
		// 	frameName: 'homepage_2',
		// 	// 执行win下的frame中的方法
		// 	script: 'fnGetLoginData();',
		// });
		// api.execScript({
		//     name: 'Main_Frame_two',
		//     frameName: 'mine_2',
		//     script: 'fnGetLoginData();',
		// });

		api.openWin({
			name: 'Main_Frame',
			url: 'Main_Frame.html',
			showProgress: true,
			vScrollBarEnabled: false,
			hScrollBarEnabled: false,
			slidBackEnabled: false,
			delay: 300,
			animation: {
					type: 'ripple',
					duration: 1000
			}
		});
		Refresh()
	}
	function Refresh() {
		api.execScript({
			// window名字
			name: 'Main_Frame',
			// frame名字
			frameName: 'homepage_2',
			// 执行win下的frame中的方法
			script: 'fnGetInfo();',
		});

		api.execScript({
				// window名字
				name: 'Main_Frame_two',
				// frame名字
				frameName: 'RechargePayment',
				// 执行win下的frame中的方法
				script: 'fnGetLoginData1();',
		});
		api.execScript({
				// window名字
				name: 'Main_Frame',
				// frame名字
				frameName: 'RechargePayment',
				// 执行win下的frame中的方法
				script: 'fnGetLoginData1();',
		});

		api.execScript({
				// window名字
				name: 'Main_Frame_two',
				frameName: 'mine_2',
				// 执行win下的frame中的方法
				script: 'fnGetLoginDatamine();',
		});
	}

	function reToast(ret, err) {
		var remessage;
		if (ret) {
			console.log("reToast:" + JSON.stringify(ret));
			api.toast({
				msg: "车车侠：" + ret.message,
				duration: 2000,
				location: 'bottom',
				global: true,
			});
		} else {
			console.log("reToast:" + JSON.stringify(err));
			api.toast({
				msg: "车车侠：" + err.message,
				duration: 2000,
				location: 'bottom',
				global: true,
			});
		}
	}
</script>

</html>
